সিএসএস৩ 3D ট্রান্সফর্ম (CSS3 3D Transform)

Web Development - সিএসএস (CSS) সিএসএস৩ & এডভান্স সিএসএস (CSS3 & Advance CSS) |
217
217

সিএসএস(৩) 3D ট্রান্সফর্মেশন এর মাধ্যমে একটি এলিমেন্টেকে ত্রিমাত্রিকভাবে পরিবর্তন করা যায়।


এক নজরে সিএসএস 3D ট্রান্সফর্ম প্রোপার্টিসমূহ


সিএসএস(৩) 3D ট্রান্সফর্ম

এই অধ্যায়ে আপনি নিম্নলিখিত 3D ট্রান্সফর্ম মেথড সম্পর্কে জানতে পারবেনঃ


rotateX(), rotateY() এবং rotateZ() মেথড

rotateX() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার X-অক্ষের চারপাশে ঘুরাবেঃ

rotateY() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Y-অক্ষের চারপাশে ঘুরাবেঃ

rotateZ() মেথড একট এলিমেন্টকে প্রদত্ত ডিগ্রী অনুসারে তার Z-অক্ষের চারপাশে ঘুরাবেঃ

সিএসএস৩ 3D ট্রান্সফর্ম (CSS3 3D Transform) - Example

<!DOCTYPE html>
<html>
<head>
  <title>css 3d transform</title>
<style>
    div{
        width: 80%;
        height: auto;
        background-color: orange;
        border: 2px dotted red;
    }
    #three-d-box-x {
        transform: rotateX(170deg);
    }
    #three-d-box-y {
        transform: rotateY(170deg);
    }
    #three-d-box-z {
        transform: rotateZ(170deg);
    }
</style>
</head>
<body>
    <div>এটি একটি  স্বাভাবিক div এলিমেন্ট</div>
    <h2>rotateX() মেথড এর ব্যবহার।</h2>
    <div id="three-d-box-x">এই div এলিমেন্টকে X-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
      
    <h2>rotateY() মেথড এর ব্যবহার।</h2>
    <div id="three-d-box-y">এই div এলিমেন্টকে Y-অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
      
    <h2>rotateZ() মেথড এর ব্যবহার।</h2>
    <div id="three-d-box-z">এই div এলিমেন্টকে Z- অক্ষের সাপেক্ষে 170 ডিগ্রি কোণে ঘুরানো হয়েছে।</div>
      
    <p><b>নোট :</b>  ইন্টারনেট এক্সপ্লোরার ৯ 
    এবং এর আগের ভার্সনে rotate() মেথড সাপোর্ট করে না।</p>
</body>
</html>

ব্রাউজার সাপোর্ট

Content added By
টপ রেটেড অ্যাপ

স্যাট অ্যাকাডেমী অ্যাপ

আমাদের অল-ইন-ওয়ান মোবাইল অ্যাপের মাধ্যমে সীমাহীন শেখার সুযোগ উপভোগ করুন।

ভিডিও
লাইভ ক্লাস
এক্সাম
ডাউনলোড করুন
Promotion
;